<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in items">
                <div class="swiper-zoom-container">
                    <img :src="item">
                </div>
            </div>
        </div>
        <div class="swiper-pagination swiper-pagination-white"></div>
        <template v-if="items.length > 0">
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </template>
    </div>
</template>

<script>
    import Swiper from 'swiper';

    export default {
        name: 'Preview',
        props: {
            items: {
                type: Array,
                default: []
            }
        },
        mounted() {
            var opts = {
                direction: 'horizontal',
                pagination: {
                    el: '.swiper-pagination',
                }
            };
            if (this.items.length > 0) {
                opts = Object.assign(opts, {
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                });
            }
            var swiper = new Swiper('.swiper-container', opts);
        }
    };
</script>

<style lang="scss">
    @import '~swiper/dist/css/swiper.min.css';
    .swiper-container {
        height: 100%;
        margin: 0 30px;
    }
    .swiper-slide {
        overflow: hidden;
    }
    .ivu-modal-content{
        background: transparent;
    }
</style>
